<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';
import {postTrend} from "@/api/system/config";

export default {
  mounted() {
    this.initChart();
  },
  data(){
    return{
      data:[]
    }
  },
  methods: {
    async initChart() {
      await postTrend().then(response => {
        this.data  = response.data
      });
      const chart = echarts.init(this.$refs.chart);

      const option = {
        title: { text: '帖子数量趋势' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: this.data.map(item => item.date)
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.data.map(item => item.count),
          type: 'line',
          smooth: true,
          areaStyle: {}
        }]
      };

      chart.setOption(option);
    }
  }
}
</script>
